<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>

    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../css/elementui.css" /> -->
    <link rel="stylesheet" href="../script/elementui/lib/theme-chalk/index.css?t=1">
    <link href="../script/elementui/vue-element-table.css" rel="stylesheet" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/elementui.js"></script>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .content {
            padding: 20px;
        }

        .item {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            border-radius: 8px;
        }

        .van-field {
            width: 33%;
        }

        .van-field__value,
        .value_left {
            text-align: left;
        }

        .van-field:nth-child(1) {
            width: 100%;
        }

        .van-field__label {
            margin-right: 8px;
            width: auto;
        }

        .number {
            text-align: center;
            margin-right: 8px;
            width: 2em;
            height: 2em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .value {
            text-align: left;
            color: #4A4A4A;
            font-weight: 500;
            font-size: 18px;
        }

        #safeTop .van-button__content .van-button__icon {
            color: #323233;
        }

        .boxdiv {
            display: flex;
            align-items: center;
            padding: 5px;
        }

        .boxdiv .el-date-picker {
            padding: 0 20px 0 0
        }

        .boxdiv .van_Button {
            width: 80px;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar id="safeTop" :title="name + '列表' + '('   + CS + ')'" left-arrow @click-left="onClickLeft"
                @click-right="addNew">
                <template #right>
                    <van-button size="small" type="default" icon="plus"></van-button>
                </template>
            </van-nav-bar>

            <div class="boxdiv">
                <el-date-picker v-model="StartDate" type="date" placeholder="开始时间" readonly @focus='datePicker("开始")'>
                </el-date-picker>
                <el-date-picker v-model="EndDate" type="date" placeholder="结束时间" readonly @focus='datePicker("结束")'>
                </el-date-picker>
                <van-button class="van_Button" type="primary" @click='getDataList("搜索")'>搜索</van-button>


            </div>

            <div class="content">

                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
                    immediate-check="false">
                    <div class="item" v-for="(item, index) in tableData" @click="intoItem(item)">
                        <div class="van-cell van-field">
                            <div class="van-cell__title van-field__label number">
                                <span>{{index + 1}}</span>
                            </div>
                            <div class="van-cell__value van-field__value value">{{item.ProductName}}</div>
                        </div>

                        <div class="van-cell van-field">
                            <div class="van-cell__title van-field__label">
                                <span>灌酸日期：</span>
                            </div>
                            <div class="van-cell__value van-field__value value_left">{{item.CreateTime1}}</div>
                        </div>
                        <div class="van-cell van-field">
                            <div class="van-cell__title van-field__label">
                                <span>灌酸数量：</span>
                            </div>
                            <div class="van-cell__value van-field__value value_left">{{item.GSQty}}</div>
                        </div>
                        <div class="van-cell van-field">
                            <div class="van-cell__title van-field__label">
                                <span>上架数量：</span>
                            </div>
                            <div class="van-cell__value van-field__value value_left">{{item.SJQty}}</div>
                        </div>
                        <div class="van-cell van-field" style="width: 100%;">
                            <div class="van-cell__title van-field__label">
                                <span>上架号：</span>
                            </div>
                            <div class="van-cell__value van-field__value value_left">{{item.SJNo}}</div>
                        </div>

                        <!-- <div class="van-cell van-field">
                            <div class="van-cell__title van-field__label">
                                <span>灌酸开始时间：</span>
                            </div>
                            <div class="van-cell__value van-field__value value_left">{{item.GSStartDate}}</div>
                        </div>
                        <div class="van-cell van-field">
                            <div class="van-cell__title van-field__label">
                                <span>灌酸结束时间：</span>
                            </div>
                            <div class="van-cell__value van-field__value value_left">{{item.GSSEndDate}}</div>
                        </div> -->
                    </div>
                </van-list>
            </div>

            <van-popup v-model="datePickerShow" position="bottom">
                <van-datetime-picker v-model="currentDate" type="date" title="选择操作日期" @confirm="onConfirm"
                    @cancel="datePickerShow = false"></van-datetime-picker>
            </van-popup>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'refreshAddAcidDetailList'
        }, function (ret) {
            window.location.reload();
            vm.pageIndex = 1
            vm.tableData = [];
            setTimeout(function () {
                vm.getDataList()
            }, 200);

        })



        vm = new Vue({
            el: '#app',
            data: {
                CS: '',
                datePickerShow: false,
                datePickerTitle: '',
                name: api.pageParam.name,
                tableData: [],
                loading: false,
                finished: false,
                pageIndex: 1,
                pageSize: 20,
                StartDate: '',
                EndDate: '',
                currentDate: new Date(),

            },
            created: function () {
                var that = this;
                window.localStorage.setItem('pageName', JSON.stringify(that.name))
                var nowTime = APP.getFormatDate(new Date()).split(' ')[0]
                that.StartDate = nowTime
                that.EndDate = nowTime
                that.CS = JSON.parse(window.localStorage.getItem('userInfo')).className
                that.getDataList()
                setInterval(function () {
                    APP.getCDAlarmLList()
                    APP.getYCKBDataLiist()
                }, 60000)

            },
            mounted() {
                APP.setSafeTop()

            },
            methods: {
                datePicker(val) {
                    var that = this
                    that.datePickerShow = true
                    that.datePickerTitle = val
                },
                onConfirm(date) {
                    var that = this
                    that.datePickerShow = false;
                    // APP.getFormatDate(new Date()).split(' ')[0]
                    var DateTime = APP.getFormatDate(this.currentDate).split(' ')[0]

                    if (that.datePickerTitle == '开始') {
                        that.StartDate = DateTime;
                    } else {
                        that.EndDate = DateTime;
                    }

                },
                onClickLeft() {
                    var that = this
                    api.closeWin()
                    api.sendEvent({
                        name: 'refreshIndexList'
                    })

                },
                onLoad() {
                    var that = this
                    that.pageIndex++
                    console.log('加', JSON.stringify(that.pageIndex))
                    that.getDataList()
                },

                getDataList(val) {
                    var that = this
                    if (val) {
                        // that.loading = false
                        that.finished = false
                        that.pageIndex = 1
                        that.tableData = []
                    }

                    that.loading = true

                    var obj = {
                        pageIndex: that.pageIndex,
                        pageSize: that.pageSize,
                        StartDate: that.StartDate,
                        EndDate: that.EndDate,
                        CJ: JSON.parse(window.localStorage.getItem('userInfo')).classID
                    }
                    console.log('obj', JSON.stringify(obj))
                    // APP.ajax('getGSRecords', obj, function (res) {
                    APP.ajax('getGSRecords_Job', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        res.ds.map((item) => {
                            item.GSStartDate = item.GSStartDate ? item.GSStartDate.split('T')[0] : ''
                            item.GSSEndDate = item.GSSEndDate ? item.GSSEndDate.split('T')[0] : ''
                        })
                        that.tableData.push(...res.ds)
                        // that.tableData = res.ds
                        that.loading = false
                        if (res.ds.length < that.pageSize) {
                            that.finished = true
                        }
                    })

                },
                addNew() {
                    var that = this
                    api.openWin({
                        name: 'AddAcidDetail',
                        url: 'AddAcidDetail.html',
                        pageParam: {
                            name: that.name
                        }
                    })
                },
                intoItem(row) {
                    var that = this
                    console.log(JSON.stringify({
                        name: that.name,
                        GSRow: row
                    }));
                    api.openWin({
                        name: 'AddAcidDetail',
                        url: 'AddAcidDetail.html',
                        pageParam: {
                            name: that.name,
                            GSRow: row
                        }
                    })
                }
            }
        })
    };
</script>

</html>